<template>
  <div class="h-naive-ui-login-box">
    <div class="h-naive-ui-login-left">
      <div class="h-naive-ui-login-left-img">
        <img src="@/assets/logo/bg.png" alt="">
      </div>
      <div class="h-naive-ui-login-left-1"></div>
      <div class="h-naive-ui-login-left-2"></div>
      <div class="h-naive-ui-login-left-3"></div>
    </div>

    <div class="h-naive-ui-login-right">
      <div class="h-naive-ui-login-right-login">
        <div class="h-naive-ui-login-right-login-titlle">
          <!-- border: 1px solid red; -->
          <n-ellipsis style="max-width: 340px;  font-size: 24px">
            {{webTitle}}
          </n-ellipsis>

        </div>
        <div class="h-naive-ui-login-right-login-form">
          <n-card>
            <n-tabs class="card-tabs" default-value="signin" size="large" justify-content="space-evenly" animated
              pane-wrapper-style="margin: 0 -4px"
              pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
              <n-tab-pane name="signin" tab="登录">
                <n-form>
                  <n-form-item-row label="用户名">
                    <n-input placeholder="请输入用户名" v-model:value="loginData.uname" />
                  </n-form-item-row>
                  <n-form-item-row label="密码">
                    <n-input type="password" show-password-on="click" placeholder="请输入密码"
                      v-model:value="loginData.upasswd">
                      <template #password-visible-icon>
                        <n-icon :size="16" :component="GlassesOutline" />
                      </template>
                      <template #password-invisible-icon>
                        <n-icon :size="16" :component="Glasses" />
                      </template>
                    </n-input>
                  </n-form-item-row>
                </n-form>
                <n-button type="primary" block secondary strong @click="usersLogin">
                  登录
                </n-button>
              </n-tab-pane>
              <n-tab-pane name="signup" tab="注册">
                <n-form>
                  <n-form-item-row label="用户名">
                    <n-input placeholder="请输入用户名" v-model:value="registData.uname" />
                  </n-form-item-row>
                  <n-form-item-row label="密码">
                    <n-input type="password" show-password-on="click" placeholder="请输入密码"
                      v-model:value="registData.upasswd">
                      <template #password-visible-icon>
                        <n-icon :size="16" :component="GlassesOutline" />
                      </template>
                      <template #password-invisible-icon>
                        <n-icon :size="16" :component="Glasses" />
                      </template>
                    </n-input>
                  </n-form-item-row>
                  <n-form-item-row label="重复密码">
                    <n-input type="password" show-password-on="click" placeholder="请输入重复密码"
                      v-model:value="registData.qupasswd">
                      <template #password-visible-icon>
                        <n-icon :size="16" :component="GlassesOutline" />
                      </template>
                      <template #password-invisible-icon>
                        <n-icon :size="16" :component="Glasses" />
                      </template>
                    </n-input>
                  </n-form-item-row>
                </n-form>
                <n-button type="primary" block secondary strong @click="usersRegister">
                  注册
                </n-button>
              </n-tab-pane>
            </n-tabs>
          </n-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia"
import { mainData } from "@/stores/index"
import router from "@/router"
import { ref, reactive } from "vue";
import useAxios from "@/config/js/AxiosConfig"
import { useMessage } from "naive-ui";
import { Glasses, GlassesOutline } from "@vicons/ionicons5";

let axios = useAxios()
let message = useMessage()

let piniaData = mainData()
let { webTitle, ifUserAuthority, userName } = storeToRefs(piniaData)

let loginData = reactive(
  {
    uname: null,
    upasswd: null
  }
)

let registData = reactive({
  uname: null,
  upasswd: null,
  qupasswd: null
})

/**
 * 登录方法
 */
function usersLogin() {
  // axios.post("/users/login", {
  //   uname: loginData.uname,
  //   upasswd: loginData.upasswd
  // },
  //   {
  //     headers: {
  //       'Content-Type': 'application/x-www-form-urlencoded'
  //     }
  //   }
  // ).then(function (res) {
  //   console.log(res);
  //   if (res.flag) {
  userName.value = loginData.uname
  ifUserAuthority.value = res.flag
  message.success(res.message);
  router.push("/")
  //   } else {
  //     ifUserAuthority.value = res.flag
  //     message.error(res.message);
  //   }
  // }).catch(function (err) {
  //   console.log(err);
  // })
}

/**
 * 注册方法
 */
function usersRegister() {
  if (registData.uname !== null && registData.upasswd !== null && registData.qupasswd !== null) {
    if (registData.upasswd === registData.qupasswd) {
      axios.post("/users/register", {
        uname: registData.uname,
        upasswd: registData.upasswd
      })
        .then(res => {
          if (res.flag) {
            message.success(res.message);
          } else {
            message.error(res.message);
          }
        })
        .catch(err => {
          console.error(err);
        })
    } else {
      message.error("请在次确认重复密码是否正确！");
    }
  } else {
    console.log("错误");
  }
}
</script>
<style scoped>
@import url("@/styles/ViewCss/LoginView.css");
</style>